<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0; padding: 0;
		}
		html body{
			font-family: "微软雅黑";
			overflow: hidden;
			background-color: black;
		}
		.pnameL {
			font-size: 20px; background: #D1D3D6; width: 60px; padding: 10px; display:inline-block;
		}
		.pnameR {
			font-size: 20px; background: #D1D3D6; width: 60px; padding: 10px; display:inline-block;
		}
		.vs {
			font-size: 20px; color: red; display:inline-block;
		}
		.pkbtn {
			font-size: 28px;
			background: linear-gradient(rgba(219, 219, 219, 0.9) 48%, rgba(169, 169, 169, 0.7) 48%);
			border-radius: 3px;
			width: 100px;
			border-style: solid;
			border-width: thin;
			border-color: darkgreen;
			position: relative;
			margin: auto;
			cursor: pointer;
		}
		.pkcontent {
			color: white;
			font-size: 16px;
			border-radius: 3px;
			width: 600px;
			position: relative;
			margin: auto;
		}
		.playerL{
			position: fixed; width: 25%; height: 25px; left: 10px; top: 10px; background: green; z-index: 10; 
		}
		.playerR{
			position: fixed; width: 25%; height: 25px; right: 10px; top: 10px; background: green; z-index: 10;
		}
		.gameover{
			position: fixed;
			left:0; right:0; top:0; bottom:0;
			height: 200px; width: 30%;
			line-height: 200px;		
			margin:auto;
			background-color: cadetblue;
			text-align: center;
			font-size: 25px;
			color: black;
			display: none;
		}
		.spark {
			width: 3px;
			height: 30px;
			background: white;
			position: absolute;
		} 
		.firework {
			position: absolute;
			width: 5px;
			height: 5px;
		}
		#copyright{position: fixed;left: 0; bottom:0; width:100%; height: 50px; text-align: center; line-height:50px;border-width:2px 0 0;color: white;}
	</style>
	<script src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="player.js"></script>
	<script type="text/javascript" src="judge.js"></script>

	<script>
		
		var namelist = ["刘晋豪", "高晓兵", "欧阳秋雪", "曲文芳", "叶宏波", "姜斌", "范晔婷", "郭慧琴", "赵本东", "张梦兰", "乔振华", "刘亮", "张翼辉", "王宗其", "张冬喜", "吴晓倩", "杨宇星", "张兆欢", "张晋哲", "师瑞鑫", "刘浩", "王晓腾"];
		//
		//职责分配
		//1选手、2裁判
		var judge = null;
		var playerA = null;
		var playerB = null;
		window.onload = function() {
			judge = new Judge();
			playerA = new Player(namelist[parseInt(Math.random() * 22)], document.getElementById("player1"), 100);
			playerB = new Player(namelist[parseInt(Math.random() * 22)], document.getElementById("player2"), 100);
			document.getElementsByClassName("pnameL")[0].innerHTML = playerA.pname;
			document.getElementsByClassName("pnameR")[0].innerHTML = playerB.pname;
			playerA.enemy = playerB;
			playerB.enemy = playerA;
			judge.attacker = playerA;
		}
		function startPK() {
			judge.start();
		}
	</script>

	<body>
		
		<div id="player1" class="playerL"></div>
		<div id="player2" class="playerR"></div>
		<div style="width:100%; margin:10px auto; text-align: center;  ">
			<div class="pnameL">键盘侠</div>
			<div class="vs">VS</div>
			<div class="pnameR">小龙虾</div>
		</div>
		<p></p>
		<p>
			<div class="pkbtn" onclick="startPK()">开始PK</div>
		</p>
		<p>
			<div class="pkcontent">
				
			</div>
		</p>
		<div id="gameover" class="gameover"></div>
		<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. </div>
	</body>
	
</html>